<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>石头剪子布游戏 </title>
        <style type="text/css">
            div{margin:20px auto;padding:10px;border:2px solid #999;width:200px;background:#ffe;}
            div#cu{font-weight:bold;font-size:30px;height:40px;color:red;}
            div#la{border:none;background:none;display:none;}
            span{color:red;font-weight:bold;}
        </style>
        <script type="text/javascript">
            var se = null,time=20,you=0,arr=new Array('石头','抹布','剪子');
            function p(n){
                you = n;
                document.getElementById('you').innerHTML=s(n);
                document.getElementById('st').disabled=true;
                document.getElementById('mb').disabled=true;
                document.getElementById('jz').disabled=true;
                document.getElementById('cu').innerHTML = '...';
                se = setInterval('t()',50);
            }
            function agin(){
                document.getElementById('st').disabled=false;
                document.getElementById('mb').disabled=false;
                document.getElementById('jz').disabled=false;       
                document.getElementById('la').style.display = 'none';
                document.getElementById('you').innerHTML = '';      
                document.getElementById('pc').innerHTML = '';
                document.getElementById('cu').innerHTML = '';
                document.getElementById('you').innerHTML= '请选择';        
            }
            function bt(){
                var pc = Math.floor(Math.random() * 3 + 1);
                document.getElementById('pc').innerHTML = s(pc);
                var str='';
                if(pc==you){
                    str += '平局';    
                }else{
                    var b = pc-you;
                    if(b>0){
                        if(b==1){
                            str += '电脑赢';   
                        }else{
                            str += '你赢啦';   
                        }               
                    }else{
                        b = b*-1;   
                        if(b==1){
                            str += '你赢啦';   
                        }else{
                            str += '电脑赢';   
                        }   
                    }       
                }
                document.getElementById('la').style.display = 'block';
                document.getElementById('cu').innerHTML = str;
            }
            function t(){
                if(time>0){
                    document.getElementById('pc').innerHTML = arr[time%3];
                    time--;
                }else{
                    clearInterval(se);
                    se = null;
                    time = 20;
                    bt();
                }
            }
            function s(n){
                if(n==1){
                    return '石头';    
                }else if(n==2){
                    return '抹布';    
                }else{
                    return '剪子';    
                }
            }
        </script>
    </head>
    <body>
        <div>
            <p>你出什么？<span id="you">请选择</span></p>
            <p><button id="st" onclick="p(1);">石头</button></p>
            <p><button id="mb" onclick="p(2);">抹布</button></p>
            <p><button id="jz" onclick="p(3);">剪子</button></p>
        </div>
        <div>
            <p>电脑出？</p>
            <span style="" id="pc"></span>
        </div>
        <div id="cu"></div>
        <div id="la"><button id="agin" onclick="agin()">再来一次</button></div>
    </body>
</html>         